<template>
  <!-- 主容器 - 医疗系统主题 -->
  <div class="health-report-container">
    <el-card class="main-card">
      <el-container>
        <!-- 页面标题 -->
        <div class="page-header">
          <h2 class="page-title">健康报告管理</h2>
        </div>
        
        <!-- 搜索区域 -->
        <el-header class="search-section">
          <el-card class="search-card">
            <el-form :inline="true" class="search-form">
              <el-form-item label="报告类型" class="search-item">
                <el-input 
                  v-model="reportquery.ReportType"
                  placeholder="请输入报告类型" 
                  class="search-input"
                  prefix-icon="Search"
                />
              </el-form-item>

              <el-form-item class="search-item">
                <el-button type="info" @click="reset" style="width: 80px;">
                  重置
                </el-button>
                <el-button type="primary" @click="getreport" style="width: 80px;">
                  查询
                </el-button>
                <!-- 操作按钮区域 -->
                <el-button type="success" @click="logic.isopen = true" style="width: 80px;">新增</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-header>
        
        <!-- 数据表格区域 -->
        <el-main class="data-section">
          <el-card class="data-card">
            <!-- 表格工具栏 -->
            <div class="table-header">
              <div class="table-title">报告列表</div>
              <div class="table-stats">
                共 <span class="stat-number">{{ paging.totalCount }}</span> 条记录
              </div>
            </div>
            
            <!-- 数据表格 -->
            <el-table 
              :data="reportdata" 
              border 
              style="width: 100%"
              class="medical-table"
              highlight-current-row
              :header-cell-style="tableHeaderStyle"
            >
              <el-table-column type="index" label="序号" width="60" align="center" />
              <el-table-column prop="reportType" label="报告类型" width="300" align="center" show-overflow-tooltip />
              <el-table-column prop="userNickname" label="创建人" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="createTime" label="创建时间" width="140" align="center">
                <template v-slot="scope">
                  {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
                </template>
              </el-table-column>
              <el-table-column prop="reportingPeriod" label="报告周期"  align="center" show-overflow-tooltip />
              <el-table-column prop="userNickname" label="发布人" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="releaseStatus" label="发布状态" width="100" align="center">
                <template v-slot="scope">
                  <el-tag type="success" v-if="scope.row.releaseStatus == '1'">已发布</el-tag>
                  <el-tag type="danger" v-if="scope.row.releaseStatus == '0'">未发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template v-slot="scope">
                  <el-button type="warning" size="small" v-if="scope.row.releaseStatus == 1" @click="updateState(scope.row)" >撤回</el-button>
                  <el-button type="success" size="small"  v-if="scope.row.releaseStatus == 0" @click="updateState(scope.row)" >发布</el-button>
                  <el-button type="danger" size="small" v-if="scope.row.releaseStatus == 0" v-show="true"  @click="reportdelete(scope.row)" >删除</el-button>
                  <el-button type="primary" size="small" v-if="scope.row.releaseStatus == 1" v-show="true"  @click="Details(scope.row)" >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页控件 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="paging.PageIndex"
                v-model:page-size="paging.PageSize"
                :page-sizes="[3, 5, 7, 10]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paging.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="medical-pagination"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-card>
</div>
  <!-- 新增对话框 -->
  <el-dialog 
    v-model="logic.isopen" 
    title="新增报告" 
    width="600px"
    center
    class="medical-dialog"
  >
    <el-form class="medical-form">
      <el-form-item label="创建人" class="form-item">
        <el-select v-model="model.userId">
            <el-option v-for="item in userdata" :label="item.userNickname" :value="item.userId" />
        </el-select>
      </el-form-item>
       <el-form-item label="报告周期" class="form-item">
        <el-input v-model="model.reportingPeriod" placeholder="请输入报告周期" />
      </el-form-item>
      <el-form-item label="报告类型" class="form-item">
        <el-select v-model="model.reportType" placeholder="请选择报告类型">
          <el-option label="高血压监测报告" value="高血压监测报告" />
          <el-option label="糖尿病管理报告" value="糖尿病管理报告" />
          <el-option label="心血管健康报告" value="心血管健康报告" />
          <el-option label="体重管理报告" value="体重管理报告" />
          <el-option label="运动康复报告" value="运动康复报告" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="cancel-btn" @click="logic.isopen = false">取消</el-button>
        <el-button type="primary" class="submit-btn" @click="adduser()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 打印模板设计器对话框 -->
  <PrintTemplateDesigner 
    v-model="printDesignerVisible" 
    :reportData="healthReportDetails"
    @templateSaved="onTemplateSaved"
    @printed="onPrinted"
  />

  <!-- 测试sv-print组件 -->
  <div v-if="false" style="display: none;">
    <Designer 
      :data="testTemplateData" 
      :providers="testProviders" 
      :provider-map="testProviderMap" 
      @designed="handleTestDesigned" 
    />
  </div>

  <!-- 健康报告详情对话框 -->
  <el-dialog
    v-model="detailsDialogVisible"
    title="综合健康报告"
    width="800px"
    class="medical-dialog"
    :before-close="() => { detailsDialogVisible = false; }"
  >
    <div class="health-report-content" v-loading="false">
      <!-- 报告头部信息 -->
      <div class="report-header">
        <h3 class="report-title">综合健康报告</h3>
        <div class="report-date">编制日期：{{ healthReportDetails.reportDate }}</div>
      </div>

      <!-- 患者基本信息 -->
      <div class="report-section">
        <h4 class="section-title">基本信息</h4>
        <div class="patient-info">
          <div class="info-item"><span class="info-label">姓名：</span><span class="info-value">{{ healthReportDetails.patientInfo.name }}</span></div>
          <div class="info-item"><span class="info-label">年龄：</span><span class="info-value">{{ healthReportDetails.patientInfo.age }}</span></div>
          <div class="info-item"><span class="info-label">性别：</span><span class="info-value">{{ healthReportDetails.patientInfo.gender }}</span></div>
          <div class="info-item"><span class="info-label">身份证号：</span><span class="info-value">{{ healthReportDetails.patientInfo.patientId }}</span></div>
          <div class="info-item"><span class="info-label">身高：</span><span class="info-value">{{ healthReportDetails.patientInfo.height }}</span></div>
          <div class="info-item"><span class="info-label">体重：</span><span class="info-value">{{ healthReportDetails.patientInfo.weight }}</span></div>
          <div class="info-item"><span class="info-label">BMI：</span><span class="info-value">{{ healthReportDetails.patientInfo.bmi }}</span></div>
          <div class="info-item"><span class="info-label">血型：</span><span class="info-value">{{ healthReportDetails.patientInfo.bloodType }}</span></div>
          <div class="info-item"><span class="info-label">职业：</span><span class="info-value">{{ healthReportDetails.patientInfo.occupation }}</span></div>
        </div>
      </div>

      <!-- 血压信息 -->
      <div class="report-section">
        <h4 class="section-title">血压</h4>
        <div class="blood-pressure-chart">
          <div class="pressure-info">
            <div class="pressure-main">
              <span class="pressure-value systolic">{{ healthReportDetails.bloodPressure.systolic }}</span>
              <span class="pressure-unit">mmHg</span>
              <span class="pressure-separator">/</span>
              <span class="pressure-value diastolic">{{ healthReportDetails.bloodPressure.diastolic }}</span>
              <span class="pressure-unit">mmHg</span>
            </div>
            <div class="pressure-evaluation">{{ healthReportDetails.bloodPressure.evaluation }}</div>
            <div class="pressure-time">{{ healthReportDetails.bloodPressure.recordTime }}</div>
          </div>
          <div class="chart-container">
            <div class="blood-pressure-bar">
              <div class="bar-item danger" style="height: 80px;"></div>
              <div class="bar-item warning" style="height: 60px;"></div>
              <div class="bar-item normal" style="height: 40px;"></div>
              <div class="bar-item low" style="height: 20px;"></div>
            </div>
            <div class="chart-labels">
              <div>危险血压</div>
              <div>轻度高血压</div>
              <div>正常血压</div>
              <div>低血压</div>
            </div>
          </div>
        </div>
        <div class="indicator-score">
          <div class="score-item">
            <span>收缩压评分</span>
            <span class="score-number">75</span>
          </div>
          <div class="score-item">
            <span>舒张压评分</span>
            <span class="score-number">80</span>
          </div>
          <div class="score-item">
            <span>心率评分</span>
            <span class="score-number">85</span>
          </div>
          <div class="score-item">
            <span>心血管健康</span>
            <span class="score-number">82</span>
          </div>
        </div>
      </div>

      <!-- 血糖信息 -->
      <div class="report-section">
        <h4 class="section-title">血糖</h4>
        <div class="glucose-info">
          <div class="glucose-item">
            <div class="glucose-label">空腹血糖</div>
            <div class="glucose-value">{{ healthReportDetails.bloodGlucose.fasting }} mmol/L</div>
          </div>
          <div class="glucose-item">
            <div class="glucose-label">餐后2小时血糖</div>
            <div class="glucose-value">{{ healthReportDetails.bloodGlucose.twoHoursAfterMeal }} mmol/L</div>
          </div>
          <div class="glucose-item">
            <div class="glucose-label">糖化血红蛋白</div>
            <div class="glucose-value">{{ healthReportDetails.bloodGlucose.glycatedHemoglobin }} %</div>
          </div>
          <div class="glucose-evaluation">
            <div class="evaluation-label">评估：</div>
            <div class="evaluation-value">{{ healthReportDetails.bloodGlucose.evaluation }}</div>
          </div>
          <div class="glucose-time">{{ healthReportDetails.bloodGlucose.recordTime }}</div>
        </div>
        <div class="glucose-chart">
          <div class="chart-row">
            <div class="chart-bar low" style="width: 40%;"></div>
            <div class="chart-bar normal" style="width: 30%;"></div>
            <div class="chart-bar high" style="width: 30%;"></div>
          </div>
          <div class="chart-legend">
            <span>低血糖</span>
            <span>正常</span>
            <span>高血糖</span>
          </div>
        </div>
        <div class="indicator-score">
          <div class="score-item">
            <span>空腹血糖评分</span>
            <span class="score-number">72</span>
          </div>
          <div class="score-item">
            <span>餐后血糖评分</span>
            <span class="score-number">65</span>
          </div>
          <div class="score-item">
            <span>糖化血红蛋白评分</span>
            <span class="score-number">70</span>
          </div>
          <div class="score-item">
            <span>血糖控制</span>
            <span class="score-number">69</span>
          </div>
        </div>
      </div>

      <!-- 生化指标 -->
      <div class="report-section">
        <h4 class="section-title">生化指标</h4>
        <div class="biochemical-table">
          <table>
            <thead>
              <tr>
                <th>检测项目</th>
                <th>总胆固醇</th>
                <th>甘油三酯</th>
                <th>HDL-C</th>
                <th>LDL-C</th>
                <th>尿酸</th>
                <th>尿素氮</th>
                <th>肌酐</th>
                <th>ALT</th>
                <th>AST</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>检测值</td>
                <td>{{ healthReportDetails.biochemicalIndicators.totalCholesterol }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.triglycerides }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.hdlCholesterol }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.ldlCholesterol }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.uricAcid }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.bloodUreaNitrogen }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.serumCreatinine }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.alanineAminotransferase }}</td>
                <td>{{ healthReportDetails.biochemicalIndicators.aspartateAminotransferase }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 用药记录 -->
      <div class="report-section">
        <h4 class="section-title">用药记录</h4>
        <div class="medication-table">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>药品名称</th>
                <th>剂量</th>
                <th>频次</th>
                <th>用药时间</th>
                <th>用药时长</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(med, index) in healthReportDetails.medicationRecords" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ med.medicationName }}</td>
                <td>{{ med.dose }}</td>
                <td>{{ med.frequency }}</td>
                <td>{{ med.administrationTime }}</td>
                <td>{{ med.duration }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 趋势分析 -->
      <div class="report-section">
        <h4 class="section-title">趋势分析</h4>
        <div class="trend-chart">
          <div class="chart-placeholder">
            <div class="trend-legend">
              <span><i class="trend-icon systolic"></i>收缩压</span>
              <span><i class="trend-icon diastolic"></i>舒张压</span>
              <span><i class="trend-icon glucose"></i>血糖</span>
              <span><i class="trend-icon cholesterol"></i>胆固醇</span>
            </div>
            <div class="trend-data">
              <!-- 模拟折线图 -->
              <div class="trend-lines">
                <svg width="100%" height="150" viewBox="0 0 800 150">
                  <!-- 网格线 -->
                  <line x1="50" y1="20" x2="750" y2="20" stroke="#e0e0e0" stroke-width="1" />
                  <line x1="50" y1="50" x2="750" y2="50" stroke="#e0e0e0" stroke-width="1" />
                  <line x1="50" y1="80" x2="750" y2="80" stroke="#e0e0e0" stroke-width="1" />
                  <line x1="50" y1="110" x2="750" y2="110" stroke="#e0e0e0" stroke-width="1" />
                  <line x1="50" y1="140" x2="750" y2="140" stroke="#e0e0e0" stroke-width="1" />
                  
                  <!-- 收缩压趋势线 -->
                  <path d="M50,70 L110,60 L170,65 L230,55 L290,60 L350,50 L410,55 L470,45 L530,65 L590,55 L650,60 L710,45 L750,50" 
                        stroke="#ff4d4f" stroke-width="2" fill="none" />
                  
                  <!-- 舒张压趋势线 -->
                  <path d="M50,100 L110,105 L170,110 L230,115 L290,110 L350,115 L410,120 L470,115 L530,110 L590,105 L650,110 L710,115 L750,110" 
                        stroke="#1890ff" stroke-width="2" fill="none" />
                  
                  <!-- 血糖趋势线 -->
                  <path d="M50,85 L110,80 L170,75 L230,80 L290,90 L350,85 L410,80 L470,85 L530,80 L590,75 L650,85 L710,80 L750,85" 
                        stroke="#fa8c16" stroke-width="2" fill="none" />
                  
                  <!-- 胆固醇趋势线 -->
                  <path d="M50,40 L110,45 L170,50 L230,55 L290,50 L350,45 L410,40 L470,45 L530,50 L590,45 L650,40 L710,45 L750,50" 
                        stroke="#52c41a" stroke-width="2" fill="none" />
                  
                  <!-- 数据点 -->
                  <circle cx="50" cy="70" r="3" fill="#ff4d4f" />
                  <circle cx="110" cy="60" r="3" fill="#ff4d4f" />
                  <circle cx="170" cy="65" r="3" fill="#ff4d4f" />
                  <!-- 更多数据点... -->
                </svg>
              </div>
              <!-- 月份标签 -->
              <div class="month-labels">
                <div v-for="(month, index) in healthReportDetails.trendAnalysis.months" :key="index">{{ month }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 运动评估 -->
      <div class="report-section">
        <h4 class="section-title">运动评估</h4>
        <div class="exercise-info">
          <div class="exercise-stats">
            <div class="stat-item">
              <div class="stat-label">每周运动次数</div>
              <div class="stat-value">{{ healthReportDetails.exerciseAssessment.weeklyExerciseFrequency }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">平均运动时长</div>
              <div class="stat-value">{{ healthReportDetails.exerciseAssessment.averageExerciseDuration }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">运动强度</div>
              <div class="stat-value">{{ healthReportDetails.exerciseAssessment.exerciseIntensity }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">运动类型</div>
              <div class="stat-value">{{ healthReportDetails.exerciseAssessment.exerciseTypes.join('、') }}</div>
            </div>
          </div>
          <div class="energy-expenditure-chart">
            <svg width="100%" height="120" viewBox="0 0 800 120">
              <!-- 柱状图 -->
              <rect x="80" y="30" width="50" height="90" fill="#1890ff" />
              <rect x="150" y="45" width="50" height="75" fill="#1890ff" />
              <rect x="220" y="20" width="50" height="100" fill="#1890ff" />
              <rect x="290" y="35" width="50" height="85" fill="#1890ff" />
              <rect x="360" y="40" width="50" height="80" fill="#1890ff" />
              <rect x="430" y="25" width="50" height="95" fill="#1890ff" />
              <rect x="500" y="30" width="50" height="90" fill="#1890ff" />
              <rect x="570" y="45" width="50" height="75" fill="#1890ff" />
              <rect x="640" y="35" width="50" height="85" fill="#1890ff" />
              
              <!-- Y轴标签 -->
              <text x="30" y="20" font-size="12" fill="#666" text-anchor="middle">300</text>
              <text x="30" y="60" font-size="12" fill="#666" text-anchor="middle">200</text>
              <text x="30" y="100" font-size="12" fill="#666" text-anchor="middle">100</text>
              
              <!-- X轴标签 -->
              <text x="105" y="115" font-size="12" fill="#666" text-anchor="middle">1月</text>
              <text x="175" y="115" font-size="12" fill="#666" text-anchor="middle">2月</text>
              <text x="245" y="115" font-size="12" fill="#666" text-anchor="middle">3月</text>
              <text x="315" y="115" font-size="12" fill="#666" text-anchor="middle">4月</text>
              <text x="385" y="115" font-size="12" fill="#666" text-anchor="middle">5月</text>
              <text x="455" y="115" font-size="12" fill="#666" text-anchor="middle">6月</text>
              <text x="525" y="115" font-size="12" fill="#666" text-anchor="middle">7月</text>
              <text x="595" y="115" font-size="12" fill="#666" text-anchor="middle">8月</text>
              <text x="665" y="115" font-size="12" fill="#666" text-anchor="middle">9月</text>
              
              <!-- 图例 -->
              <rect x="500" y="20" width="12" height="12" fill="#1890ff" />
              <text x="520" y="30" font-size="12" fill="#666">运动</text>
              <rect x="560" y="20" width="12" height="12" fill="#52c41a" />
              <text x="580" y="30" font-size="12" fill="#666">目标</text>
            </svg>
          </div>
        </div>
      </div>
      
      <!-- 综合评分 -->
      <div class="report-section">
        <h4 class="section-title">综合评分</h4>
        <div class="overall-score">
          <div class="score-display">
            <div class="score-number-large">75</div>
            <div class="score-level">良好</div>
          </div>
          <div class="score-breakdown">
            <div class="score-item">
              <span>心血管健康</span>
              <span class="score-number">82</span>
            </div>
            <div class="score-item">
              <span>代谢指标</span>
              <span class="score-number">70</span>
            </div>
            <div class="score-item">
              <span>生活方式</span>
              <span class="score-number">78</span>
            </div>
            <div class="score-item">
              <span>用药依从性</span>
              <span class="score-number">85</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="cancel-btn" @click="detailsDialogVisible = false">关闭</el-button>
        <el-button type="primary" class="submit-btn" @click="openPrintDesigner">打印报告</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 打印设置对话框 -->
  <el-dialog
    v-model="printSettingsDialogVisible"
    title="打印设置"
    width="500px"
    class="medical-dialog"
  >
    <el-form :model="printSettings" label-width="120px">
      <el-form-item label="纸张方向">
        <el-radio-group v-model="printSettings.orientation">
          <el-radio label="portrait">纵向</el-radio>
          <el-radio label="landscape">横向</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="纸张大小">
        <el-select v-model="printSettings.paperSize" placeholder="请选择纸张大小">
          <el-option label="A4" value="A4" />
          <el-option label="A5" value="A5" />
          <el-option label="Letter" value="Letter" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="打印范围">
        <el-radio-group v-model="printSettings.printRange">
          <el-radio label="all">全部内容</el-radio>
          <el-radio label="current">当前页面</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="页边距">
        <el-slider 
          v-model="printSettings.margin" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
      
      <el-form-item label="输出格式">
        <el-radio-group v-model="printSettings.outputFormat">
          <el-radio label="pdf">PDF</el-radio>
          <el-radio label="png">PNG图片</el-radio>
          <el-radio label="jpg">JPG图片</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="图片质量" v-if="printSettings.outputFormat !== 'pdf'">
        <el-slider 
          v-model="printSettings.imageQuality" 
          :min="1" 
          :max="100" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="printSettingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPrintSettings">确定打印</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus';
import axios from 'axios';
import moment from 'moment';
import { ElMessageBox } from 'element-plus';
import html2canvas from 'html2canvas';
// import jsPDF from 'jspdf';
// 导入sv-print相关组件
// import { Designer } from '@sv-print/vue3';
// import '@sv-print/vue3/dist/style.css';
// 导入打印模板设计器组件
import PrintTemplateDesigner from './PrintTemplateDesigner.vue';

const tomanagement = () => {
    location.href = '/'
}

const reportdata = ref([]);

const reportquery = reactive({
  ReportType:""
})

const paging = reactive({
    PageIndex:1,
    PageSize:8,
    totalCount:0,
    totalPage:0
})

const getreport = () =>{
    axios.get("http://localhost:5108/api/Manager/HealthReportQuery",{params:{
      ReportType:reportquery.ReportType,
      PageIndex:paging.PageIndex,
      PageSize:paging.PageSize,
    }})
    .then(res=>{
        reportdata.value = res.data.data.data;
        paging.totalCount = res.data.data.totalCount;
        paging.totalPage = res.data.data.totalPage;
    })
    
}

const reset = () =>{
  reportquery.ReportType = "";
  getreport();
}

const userdata:any = ref([]);

const getrole = () =>{
    axios.get("http://localhost:5108/api/Manager/UserInfoList")
    .then(res=>{
        userdata.value = res.data.data;
    })
    
}

onMounted(()=>{
    getreport()
    getrole()
})

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  paging.PageSize = val;
  getreport()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  paging.PageIndex = val;
  getreport()
}

const logic = reactive({
    isopen:false,
})

const model = reactive({
    reportType:"",
    userId:"",
    reportingPeriod:"",
})
// 打印设置相关数据
const printSettingsDialogVisible = ref(false)
const printDesignerVisible = ref(false)
const printSettings = ref({
  orientation: 'portrait', // 纸张方向
  paperSize: 'A4',         // 纸张大小
  printRange: 'all',       // 打印范围
  margin: 20,              // 页边距
  outputFormat: 'pdf',     // 输出格式
  imageQuality: 90         // 图片质量
})

// 测试sv-print组件的数据
const testTemplateData = ref({})
const testProviders = ref([
  {
    name: '文本',
    type: 'text',
    icon: 'text',
    data: { text: '测试文本' }
  }
])
const testProviderMap = ref({
  text: (data:any) => {
    return `<div>${data.text || ''}</div>`
  }
})

// 处理测试设计完成事件
const handleTestDesigned = (data:any) => {
  console.log('测试设计完成:', data)
}

// 打开打印设置对话框
const openPrintSettings = () => {
  printSettingsDialogVisible.value = true
}

// 打开打印模板设计器
const openPrintDesigner = () => {
  console.log('openPrintDesigner method called')
  if (!healthReportDetails || !healthReportDetails.patientInfo) {
    console.log('No health report selected')
    ElMessage.warning('请先选择一个健康报告')
    return
  }
  console.log('Opening print designer with health report details:', healthReportDetails)
  // 关闭详情对话框
  detailsDialogVisible.value = false
  // 打开打印模板设计器
  printDesignerVisible.value = true
  console.log('Print designer visibility set to:', printDesignerVisible.value)
}

// 确认打印设置
const confirmPrintSettings = async () => {
  printSettingsDialogVisible.value = false
  // 使用sv-print设计器替代原来的打印功能
  openPrintDesigner()
}

// 模板保存回调
const onTemplateSaved = (templateData:any) => {
  console.log('保存的模板数据:', templateData)
  ElMessage.success('打印模板已保存')
  printDesignerVisible.value = false
}

// 打印完成回调
const onPrinted = () => {
  console.log('Printed callback called')
  ElMessage.success('打印完成')
  printDesignerVisible.value = false
}

const adduser = () =>{
    axios.post("http://localhost:5203/api/Managment/HealthReportAdd",model)
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("新增成功");
            logic.isopen = false;
            getreport();
        }
        else{
            ElMessage.error("新增失败");
        }
    })
}

//修改状态
const updateState = (row:any) =>{
  ElMessageBox.confirm(
    '确认要修改状态吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put("http://localhost:5203/api/Managment/HealthReportUpdateStatu", row)
      .then(res=>{
        if(res.data.code==400){
            ElMessage.success(res.data.message)
            getreport()
        }
        else{
            ElMessage.error(res.data.message)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//删除
const reportdelete = (row:any) =>{
  console.log(row)
  ElMessageBox.confirm(
    '确认要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("http://localhost:5203/api/Managment/HealthReportDelete", row)
      .then(res=>{
        if(res.data.code==300){
            ElMessage.success(res.data.message)
            getreport()
        }
        else{
            ElMessage.error(res.data.message)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

// 详情对话框控制变量
const detailsDialogVisible = ref(false);

// 详情数据模型 - 模拟健康报告数据
const healthReportDetails = reactive({
  reportId: '',
  reportDate: '',
  patientInfo: {
    name: '张三',
    age: '65岁',
    gender: '男',
    patientId: '130521195804157890',
    height: '175 cm',
    weight: '78 kg',
    bmi: '25.5',
    bloodType: 'A型',
    occupation: '教师'
  },
  bloodPressure: {
    systolic: '156',
    diastolic: '78',
    meanArterialPressure: '104',
    recordTime: '2023-03-15 10:32:16',
    evaluation: '轻度高血压'
  },
  bloodGlucose: {
    fasting: '6.1',
    twoHoursAfterMeal: '9.8',
    glycatedHemoglobin: '6.5',
    recordTime: '2023-03-15 08:32:16',
    evaluation: '糖耐量异常'
  },
  biochemicalIndicators: {
    totalCholesterol: '5.7',
    triglycerides: '1.8',
    hdlCholesterol: '1.1',
    ldlCholesterol: '3.2',
    uricAcid: '415',
    bloodUreaNitrogen: '5.8',
    serumCreatinine: '85',
    alanineAminotransferase: '35',
    aspartateAminotransferase: '28'
  },
  medicationRecords: [
    { medicationName: '氨氯地平片', dose: '5mg', frequency: '每日1次', administrationTime: '早餐后', duration: '长期' },
    { medicationName: '辛伐他汀片', dose: '20mg', frequency: '每晚1次', administrationTime: '晚餐后', duration: '长期' },
    { medicationName: '阿司匹林肠溶片', dose: '100mg', frequency: '每日1次', administrationTime: '早餐前', duration: '长期' },
    { medicationName: '二甲双胍片', dose: '0.5g', frequency: '每日3次', administrationTime: '餐中', duration: '长期' }
  ],
  trendAnalysis: {
    systolic: [145, 152, 148, 156, 149, 155, 152, 156, 148, 152, 149, 155],
    diastolic: [85, 82, 80, 78, 79, 81, 78, 78, 79, 80, 78, 81],
    glucose: [6.2, 6.0, 5.9, 6.1, 6.3, 6.0, 6.1, 6.1, 6.0, 5.9, 6.2, 6.1],
    cholesterol: [5.5, 5.6, 5.7, 5.8, 5.7, 5.6, 5.5, 5.7, 5.6, 5.5, 5.7, 5.7],
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  exerciseAssessment: {
    weeklyExerciseFrequency: '4次',
    averageExerciseDuration: '45分钟/次',
    exerciseIntensity: '中等',
    exerciseTypes: ['散步', '太极', '游泳'],
    energyExpenditure: [220, 180, 250, 200, 190, 230, 210]
  }
});



// 打开详情对话框
const Details = (row?: any) => {
  // 如果有传入行数据，可以根据实际数据更新详情
  if (row) {
    // 基本信息映射
    healthReportDetails.reportId = row.reportId || '';
    healthReportDetails.reportDate = row.createTime ? moment(row.createTime).format('YYYY年MM月DD日') : moment().format('YYYY年MM月DD日');
    
    // 患者基本信息映射
    if (row.patientInfo) {
      healthReportDetails.patientInfo.name = row.patientInfo.name || healthReportDetails.patientInfo.name;
      healthReportDetails.patientInfo.age = row.patientInfo.age || healthReportDetails.patientInfo.age;
      healthReportDetails.patientInfo.gender = row.patientInfo.gender || healthReportDetails.patientInfo.gender;
      healthReportDetails.patientInfo.patientId = row.patientInfo.patientId || healthReportDetails.patientInfo.patientId;
      healthReportDetails.patientInfo.height = row.patientInfo.height || healthReportDetails.patientInfo.height;
      healthReportDetails.patientInfo.weight = row.patientInfo.weight || healthReportDetails.patientInfo.weight;
      healthReportDetails.patientInfo.bmi = row.patientInfo.bmi || healthReportDetails.patientInfo.bmi;
      healthReportDetails.patientInfo.bloodType = row.patientInfo.bloodType || healthReportDetails.patientInfo.bloodType;
      healthReportDetails.patientInfo.occupation = row.patientInfo.occupation || healthReportDetails.patientInfo.occupation;
    }
    
    // 血压信息映射
    if (row.bloodPressure) {
      healthReportDetails.bloodPressure.systolic = row.bloodPressure.systolic || healthReportDetails.bloodPressure.systolic;
      healthReportDetails.bloodPressure.diastolic = row.bloodPressure.diastolic || healthReportDetails.bloodPressure.diastolic;
      healthReportDetails.bloodPressure.meanArterialPressure = row.bloodPressure.meanArterialPressure || healthReportDetails.bloodPressure.meanArterialPressure;
      healthReportDetails.bloodPressure.recordTime = row.bloodPressure.recordTime || healthReportDetails.bloodPressure.recordTime;
      healthReportDetails.bloodPressure.evaluation = row.bloodPressure.evaluation || healthReportDetails.bloodPressure.evaluation;
    }
    
    // 血糖信息映射
    if (row.bloodGlucose) {
      healthReportDetails.bloodGlucose.fasting = row.bloodGlucose.fasting || healthReportDetails.bloodGlucose.fasting;
      healthReportDetails.bloodGlucose.twoHoursAfterMeal = row.bloodGlucose.twoHoursAfterMeal || healthReportDetails.bloodGlucose.twoHoursAfterMeal;
      healthReportDetails.bloodGlucose.glycatedHemoglobin = row.bloodGlucose.glycatedHemoglobin || healthReportDetails.bloodGlucose.glycatedHemoglobin;
      healthReportDetails.bloodGlucose.recordTime = row.bloodGlucose.recordTime || healthReportDetails.bloodGlucose.recordTime;
      healthReportDetails.bloodGlucose.evaluation = row.bloodGlucose.evaluation || healthReportDetails.bloodGlucose.evaluation;
    }
    
    // 生化指标映射
    if (row.biochemicalIndicators) {
      healthReportDetails.biochemicalIndicators.totalCholesterol = row.biochemicalIndicators.totalCholesterol || healthReportDetails.biochemicalIndicators.totalCholesterol;
      healthReportDetails.biochemicalIndicators.triglycerides = row.biochemicalIndicators.triglycerides || healthReportDetails.biochemicalIndicators.triglycerides;
      healthReportDetails.biochemicalIndicators.hdlCholesterol = row.biochemicalIndicators.hdlCholesterol || healthReportDetails.biochemicalIndicators.hdlCholesterol;
      healthReportDetails.biochemicalIndicators.ldlCholesterol = row.biochemicalIndicators.ldlCholesterol || healthReportDetails.biochemicalIndicators.ldlCholesterol;
      healthReportDetails.biochemicalIndicators.uricAcid = row.biochemicalIndicators.uricAcid || healthReportDetails.biochemicalIndicators.uricAcid;
      healthReportDetails.biochemicalIndicators.bloodUreaNitrogen = row.biochemicalIndicators.bloodUreaNitrogen || healthReportDetails.biochemicalIndicators.bloodUreaNitrogen;
      healthReportDetails.biochemicalIndicators.serumCreatinine = row.biochemicalIndicators.serumCreatinine || healthReportDetails.biochemicalIndicators.serumCreatinine;
      healthReportDetails.biochemicalIndicators.alanineAminotransferase = row.biochemicalIndicators.alanineAminotransferase || healthReportDetails.biochemicalIndicators.alanineAminotransferase;
      healthReportDetails.biochemicalIndicators.aspartateAminotransferase = row.biochemicalIndicators.aspartateAminotransferase || healthReportDetails.biochemicalIndicators.aspartateAminotransferase;
    }
    
    // 用药记录映射
    if (row.medicationRecords && Array.isArray(row.medicationRecords)) {
      healthReportDetails.medicationRecords = [...row.medicationRecords];
    }
    
    // 趋势分析映射
    if (row.trendAnalysis) {
      healthReportDetails.trendAnalysis.systolic = row.trendAnalysis.systolic ? [...row.trendAnalysis.systolic] : healthReportDetails.trendAnalysis.systolic;
      healthReportDetails.trendAnalysis.diastolic = row.trendAnalysis.diastolic ? [...row.trendAnalysis.diastolic] : healthReportDetails.trendAnalysis.diastolic;
      healthReportDetails.trendAnalysis.glucose = row.trendAnalysis.glucose ? [...row.trendAnalysis.glucose] : healthReportDetails.trendAnalysis.glucose;
      healthReportDetails.trendAnalysis.cholesterol = row.trendAnalysis.cholesterol ? [...row.trendAnalysis.cholesterol] : healthReportDetails.trendAnalysis.cholesterol;
      healthReportDetails.trendAnalysis.months = row.trendAnalysis.months ? [...row.trendAnalysis.months] : healthReportDetails.trendAnalysis.months;
    }
  } else {
    healthReportDetails.reportDate = moment().format('YYYY年MM月DD日');
  }
  
  // 打开对话框
  detailsDialogVisible.value = true;
}

// 打印报告
const printReport = async () => {
  // 获取报告内容元素
  const reportContent = document.querySelector('.health-report-content');
  
  if (reportContent) {
    try {
      // 使用html2canvas将元素转换为canvas
      const canvas = await html2canvas(reportContent as HTMLElement, {
        scale: 2, // 提高图片质量
        useCORS: true, // 允许跨域图片
        backgroundColor: '#ffffff' // 设置背景色
      });
      
      // 将canvas转换为图片数据URL
      const imageData = canvas.toDataURL('image/png');
      
      // 创建下载链接
      const link = document.createElement('a');
      link.href = imageData;
      link.download = `健康报告_${healthReportDetails.patientInfo.name}_${moment().format('YYYYMMDD')}.png`;
      
      // 触发下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      ElMessage.success('报告已成功下载为图片');
    } catch (error) {
      console.error('下载图片时出错:', error);
      ElMessage.error('下载图片失败，请重试');
    }
  } else {
    ElMessage.error('未找到报告内容');
  }
}

// 表格头部样式 - 医疗蓝主题
const tableHeaderStyle = {
  'background-color': '#e6f7ff',
  'font-weight': '600',
  'color': '#0050b3',
  'border-bottom': '2px solid #91d5ff'
};

// 根据打印设置执行打印操作
const executePrint = async () => {
  try {
    // 创建用于打印的完整报告内容区域
    let printContainer = document.getElementById('print-report-content');
    if (!printContainer) {
      printContainer = document.createElement('div');
      printContainer.id = 'print-report-content';
      printContainer.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        background: white;
        z-index: -1000;
        padding: 20px;
      `;
      document.body.appendChild(printContainer);
    }

    // 填充打印内容
    printContainer.innerHTML = `
      <div class="health-report-content-print">
        <div class="report-header">
          <h2 class="report-title">健康报告</h2>
          <div class="report-date">报告日期：${healthReportDetails.reportDate}</div>
        </div>
        
        <!-- 患者基本信息 -->
        <div class="report-section">
          <h3 class="section-title">患者基本信息</h3>
          <div class="patient-info">
            <div class="info-item"><span class="info-label">姓名：</span><span class="info-value">${healthReportDetails.patientInfo.name}</span></div>
            <div class="info-item"><span class="info-label">年龄：</span><span class="info-value">${healthReportDetails.patientInfo.age}</span></div>
            <div class="info-item"><span class="info-label">性别：</span><span class="info-value">${healthReportDetails.patientInfo.gender}</span></div>
            <div class="info-item"><span class="info-label">身份证号：</span><span class="info-value">${healthReportDetails.patientInfo.patientId}</span></div>
            <div class="info-item"><span class="info-label">身高：</span><span class="info-value">${healthReportDetails.patientInfo.height}</span></div>
            <div class="info-item"><span class="info-label">体重：</span><span class="info-value">${healthReportDetails.patientInfo.weight}</span></div>
            <div class="info-item"><span class="info-label">BMI：</span><span class="info-value">${healthReportDetails.patientInfo.bmi}</span></div>
            <div class="info-item"><span class="info-label">血型：</span><span class="info-value">${healthReportDetails.patientInfo.bloodType}</span></div>
            <div class="info-item"><span class="info-label">职业：</span><span class="info-value">${healthReportDetails.patientInfo.occupation}</span></div>
          </div>
        </div>
        
        <!-- 血压信息 -->
        <div class="report-section">
          <h3 class="section-title">血压信息</h3>
          <div class="blood-pressure-chart">
            <div class="pressure-info">
              <div class="pressure-main">
                <span class="pressure-value systolic">${healthReportDetails.bloodPressure.systolic}</span>
                <span class="pressure-separator">/</span>
                <span class="pressure-value diastolic">${healthReportDetails.bloodPressure.diastolic}</span>
                <span class="pressure-unit">mmHg</span>
              </div>
              <div class="pressure-evaluation">${healthReportDetails.bloodPressure.evaluation}</div>
              <div class="pressure-time">测量时间：${healthReportDetails.bloodPressure.recordTime}</div>
              <div class="pressure-details">
                <div class="detail-item">平均动脉压：${healthReportDetails.bloodPressure.meanArterialPressure} mmHg</div>
              </div>
            </div>
            <div class="chart-container">
              <div class="blood-pressure-bar">
                <div class="bar-item danger" style="height: 60%;"></div>
                <div class="bar-item warning" style="height: 70%;"></div>
                <div class="bar-item normal" style="height: 80%;"></div>
                <div class="bar-item low" style="height: 90%;"></div>
              </div>
              <div class="chart-labels">
                <div>极高危</div>
                <div>高危</div>
                <div>正常</div>
                <div>偏低</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 血糖信息 -->
        <div class="report-section">
          <h3 class="section-title">血糖信息</h3>
          <div class="glucose-info">
            <div class="glucose-item">
              <div class="glucose-label">空腹血糖</div>
              <div class="glucose-value">${healthReportDetails.bloodGlucose.fasting} mmol/L</div>
              <div class="glucose-evaluation">${healthReportDetails.bloodGlucose.evaluation}</div>
            </div>
            <div class="glucose-item">
              <div class="glucose-label">餐后2小时血糖</div>
              <div class="glucose-value">${healthReportDetails.bloodGlucose.twoHoursAfterMeal} mmol/L</div>
            </div>
            <div class="glucose-item">
              <div class="glucose-label">糖化血红蛋白</div>
              <div class="glucose-value">${healthReportDetails.bloodGlucose.glycatedHemoglobin} %</div>
            </div>
            <div class="glucose-time">测量时间：${healthReportDetails.bloodGlucose.recordTime}</div>
          </div>
        </div>
        
        <!-- 生化指标 -->
        <div class="report-section">
          <h3 class="section-title">生化指标</h3>
          <div class="biochemical-table">
            <table>
              <thead>
                <tr>
                  <th>总胆固醇</th>
                  <th>甘油三酯</th>
                  <th>高密度脂蛋白</th>
                  <th>低密度脂蛋白</th>
                  <th>尿酸</th>
                  <th>尿素氮</th>
                  <th>血清肌酐</th>
                  <th>谷丙转氨酶</th>
                  <th>谷草转氨酶</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>${healthReportDetails.biochemicalIndicators.totalCholesterol}</td>
                  <td>${healthReportDetails.biochemicalIndicators.triglycerides}</td>
                  <td>${healthReportDetails.biochemicalIndicators.hdlCholesterol}</td>
                  <td>${healthReportDetails.biochemicalIndicators.ldlCholesterol}</td>
                  <td>${healthReportDetails.biochemicalIndicators.uricAcid}</td>
                  <td>${healthReportDetails.biochemicalIndicators.bloodUreaNitrogen}</td>
                  <td>${healthReportDetails.biochemicalIndicators.serumCreatinine}</td>
                  <td>${healthReportDetails.biochemicalIndicators.alanineAminotransferase}</td>
                  <td>${healthReportDetails.biochemicalIndicators.aspartateAminotransferase}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 用药记录 -->
        <div class="report-section">
          <h3 class="section-title">用药记录</h3>
          <div class="medication-table">
            <table>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>药品名称</th>
                  <th>剂量</th>
                  <th>频次</th>
                  <th>用药时间</th>
                  <th>用药时长</th>
                </tr>
              </thead>
              <tbody>
                ${healthReportDetails.medicationRecords.map((med, index) => `
                  <tr>
                    <td>${index + 1}</td>
                    <td>${med.medicationName}</td>
                    <td>${med.dose}</td>
                    <td>${med.frequency}</td>
                    <td>${med.administrationTime}</td>
                    <td>${med.duration}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 运动评估 -->
        <div class="report-section">
          <h3 class="section-title">运动评估</h3>
          <div class="exercise-info">
            <div class="exercise-stats">
              <div class="stat-item">
                <div class="stat-label">每周运动次数</div>
                <div class="stat-value">${healthReportDetails.exerciseAssessment.weeklyExerciseFrequency}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">平均运动时长</div>
                <div class="stat-value">${healthReportDetails.exerciseAssessment.averageExerciseDuration}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">运动强度</div>
                <div class="stat-value">${healthReportDetails.exerciseAssessment.exerciseIntensity}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">运动类型</div>
                <div class="stat-value">${healthReportDetails.exerciseAssessment.exerciseTypes.join('、')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;

    // 显示打印容器
    printContainer.style.zIndex = '10000';
    
    // 等待DOM更新
    await new Promise(resolve => setTimeout(resolve, 100));

    // 根据输出格式执行不同的打印操作
    if (printSettings.value.outputFormat === 'pdf') {
      // PDF格式打印
      await printAsPDF(printContainer);
    } else {
      // 图片格式打印
      await printAsImage(printContainer);
    }
    
    // 隐藏打印容器
    printContainer.style.zIndex = '-1000';
  } catch (error:any) {
    console.error('打印失败:', error);
    ElMessage.error('打印失败: ' + (error.message || '未知错误'));
  }
}

// 以PDF格式打印
const printAsPDF = async (element:any) => {
  // 这里可以使用jsPDF或其他库来生成PDF
  // 为了简化实现，我们仍然使用html2canvas生成图片然后转换为PDF
  const canvas = await html2canvas(element, {
    scale: 2,
    useCORS: true,
    backgroundColor: '#ffffff'
  })
  
  const imgData = canvas.toDataURL('image/png')
  const pdf = new jsPDF({
    orientation: printSettings.value.orientation as 'portrait' | 'landscape',
    unit: 'px',
    format: printSettings.value.paperSize as 'A4' | 'A5' | 'Letter'
  })
  
  const imgWidth = pdf.internal.pageSize.getWidth()
  const imgHeight = (canvas.height * imgWidth) / canvas.width
  
  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
  pdf.save('健康报告.pdf')
  
  ElMessage.success('PDF生成成功')
}

// 以图片格式打印
const printAsImage = async (element:any) => {
  const canvas = await html2canvas(element, {
    scale: printSettings.value.imageQuality / 100 * 2, // 根据质量调整缩放
    useCORS: true,
    backgroundColor: '#ffffff'
  })
  
  const format = printSettings.value.outputFormat
  const mimeType = format === 'jpg' ? 'image/jpeg' : `image/${format}`
  
  // 创建下载链接
  const link = document.createElement('a')
  link.download = `健康报告.${format}`
  link.href = canvas.toDataURL(mimeType, format === 'jpg' ? printSettings.value.imageQuality / 100 : undefined)
  link.click()
  
  ElMessage.success(`${format.toUpperCase()}图片生成成功`)
}
</script>

<style scoped>
/* 医疗系统主题样式 */

/* 健康报告详情样式 */
.health-report-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  max-height: 600px;
  overflow-y: auto;
}

/* 报告头部 */
.report-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #1890ff;
}

.report-title {
  color: #1890ff;
  font-size: 24px;
  margin: 0 0 10px;
  font-weight: 600;
}

.report-date {
  font-size: 14px;
  color: #666;
}

/* 报告章节 */
.report-section {
  margin-bottom: 25px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.section-title {
  color: #1890ff;
  font-size: 18px;
  margin: 0 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
}

/* 患者信息 */
.patient-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: 600;
  color: #666;
  margin-right: 5px;
}

.info-value {
  color: #333;
}

/* 血压信息 */
.blood-pressure-chart {
  display: flex;
  align-items: center;
  gap: 30px;
}

.pressure-info {
  flex: 1;
}

.pressure-main {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pressure-value.systolic {
  color: #ff4d4f;
}

.pressure-value.diastolic {
  color: #1890ff;
}

.pressure-unit {
  font-size: 16px;
  color: #666;
}

.pressure-separator {
  font-size: 24px;
  margin: 0 5px;
}

.pressure-evaluation {
  font-size: 16px;
  color: #fa8c16;
  margin-bottom: 5px;
}

.pressure-time {
  font-size: 14px;
  color: #999;
}

.chart-container {
  flex: 1;
}

.blood-pressure-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100px;
  margin-bottom: 5px;
}

.bar-item {
  flex: 1;
  border-radius: 4px 4px 0 0;
}

.bar-item.danger {
  background-color: #ff4d4f;
}

.bar-item.warning {
  background-color: #fa8c16;
}

.bar-item.normal {
  background-color: #52c41a;
}

.bar-item.low {
  background-color: #1890ff;
}

.chart-labels {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.chart-labels > div {
  flex: 1;
}

/* 血糖信息 */
.glucose-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

/* 指标评分 */
.indicator-score {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.score-item span:first-child {
  color: #666;
}

.score-number {
  color: #1890ff;
  font-weight: 600;
  font-size: 16px;
}

/* 趋势线容器 */
.trend-lines {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

.glucose-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.glucose-label {
  color: #666;
}

.glucose-value {
  font-weight: 600;
  color: #1890ff;
}

.glucose-evaluation {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fa8c16;
  font-weight: 600;
}

.glucose-time {
  font-size: 14px;
  color: #999;
}

.glucose-chart {
  margin-top: 15px;
}

.chart-row {
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.chart-bar.low {
  background-color: #1890ff;
}

.chart-bar.normal {
  background-color: #52c41a;
}

.chart-bar.high {
  background-color: #ff4d4f;
}

.chart-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

/* 生化指标表格 */
.biochemical-table table,
.medication-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.biochemical-table th,
.medication-table th,
.biochemical-table td,
.medication-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e8e8e8;
}

.biochemical-table th,
.medication-table th {
  background-color: #f0f5ff;
  color: #1890ff;
  font-weight: 600;
}

/* 趋势分析 */
.trend-chart {
  height: 200px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.trend-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  justify-content: center;
}

.trend-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.trend-icon {
  width: 12px;
  height: 3px;
}

.trend-icon.systolic {
  background-color: #ff4d4f;
}

.trend-icon.diastolic {
  background-color: #1890ff;
}

.trend-icon.glucose {
  background-color: #fa8c16;
}

.trend-icon.cholesterol {
  background-color: #52c41a;
}

.trend-data {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 10px;
}

.month-labels {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

/* 运动评估 */
.exercise-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.exercise-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: 600;
  color: #1890ff;
}

.energy-expenditure-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100px;
  padding: 10px 0;
}

.energy-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 5px;
}

.energy-bar {
  flex: 1;
  background-color: #1890ff;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
}

.energy-label {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
}

/* 综合评分 */
.overall-score {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 8px;
  border: 1px solid #bae7ff;
}

.score-display {
  text-align: center;
  flex: 1;
}

.score-number-large {
  font-size: 48px;
  font-weight: bold;
  color: #1890ff;
  line-height: 1;
  margin-bottom: 5px;
}

.score-level {
  font-size: 18px;
  color: #0050b3;
  font-weight: 600;
}

.score-breakdown {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 全局容器 */
.health-report-container {
  padding: 20px;
  min-height: calc(100vh - 60px);
  background-color: #f0f5ff;
  background-image: 
    linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 主卡片 */
.main-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
}

/* 页面标题 */
.page-header {
  padding: 20px 24px 0;
  margin-bottom: 20px;
}

.page-title {
  color: #0050b3;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  padding: 0 24px 20px;
  height: auto;
}

.search-card {
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  border: none;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-item {
  margin-bottom: 0;
}

.search-input {
  width: 280px;
  transition: all 0.3s;
}

.search-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 医疗主题按钮样式 */
.search-btn, .submit-btn {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  transition: all 0.3s;
}

.search-btn:hover, .submit-btn:hover {
  background: linear-gradient(135deg, #40a9ff, #1890ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

/* 数据区域 */
.data-section {
  padding: 0 24px 24px;
  height: auto;
}

.data-card {
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  border: none;
  overflow: hidden;
}

/* 表格头部 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.table-stats {
  font-size: 14px;
  color: #8c8c8c;
}

.stat-number {
  color: #1890ff;
  font-weight: 600;
}

/* 表格样式增强 - 医疗主题 */
.medical-table {
  border-radius: 8px;
  overflow: hidden;
}

.medical-table .el-table__row {
  transition: background-color 0.3s;
}

:deep(.medical-table .el-table__body tr:hover > td) {
  background-color: #f6ffed;
}

:deep(.medical-table .el-table__body tr.current-row > td) {
  background-color: #e6f7ff;
  color: #0050b3;
}

/* 表格单元格样式 */
:deep(.medical-table .el-table__cell) {
  padding: 12px 0;
  font-size: 14px;
}

/* 分页控件 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.medical-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 对话框样式 */
.medical-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.medical-dialog__header {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: white;
}

.medical-dialog__header .el-dialog__title {
  color: white;
  font-weight: 600;
}

.medical-form {
  padding: 24px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item .el-input,
.form-item .el-select {
  width: 100%;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
  border-radius: 0 0 12px 12px;
}

.cancel-btn {
  border-radius: 6px;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 操作按钮 */
.operation-btn {
  transition: all 0.3s;
}

.operation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-input {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .health-report-container {
    padding: 12px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .pagination-container {
    justify-content: center;
  }
  
  .medical-pagination {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* 滚动条样式 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #91d5ff;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background-color: #e6f7ff;
}

/* 加载动画效果 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.loading-pulse {
  animation: pulse 1.5s infinite;
}
</style>
